<template>
  <div class="container">
    <LeftMenu/>
    <el-row>
    <el-col>
      用户id：
      <el-input
          placeholder="请输入内容"
          v-model="userId"
          style="width: 200px;"
          clearable>
      </el-input>
      <el-button @click="getStage" icon="el-icon-search" size="medium" type="primary">查询</el-button>
    </el-col>
    <el-col>
      <el-table
          :data="tableData"
          :span-method="objectSpanMethod"
          height="500"
          border
          style=" margin-left: 300px;margin-top: 20px;width: 70%">
<!--        <el-table-column-->
<!--            prop="id"-->
<!--            label="序号"-->
<!--            width="180">-->
<!--        </el-table-column>-->
        <el-table-column
            prop="userId"
            label="用户id"
            width="180"
            header-align="center"
            align="center">
        </el-table-column>
        <el-table-column
            prop="stageId"
            label="阶段"
            header-align="center"
            align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.stageId === 1" style="color: cornflowerblue">阶段一</span>
            <span v-if="scope.row.stageId === 2" style="color: orchid">阶段二</span>
            <span v-if="scope.row.stageId === 3" style="color: orangered">阶段三</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="stageTotalAssets"
            label="总资产"
            header-align="center"
            align="center">
        </el-table-column>
        <el-table-column
            prop="stageTotalTime"
            label="消耗时间"
            header-align="center"
            align="center">
        </el-table-column>
      </el-table>
    </el-col>
  </el-row>
  </div>

</template>

<script>
import LeftNavMenu from '@/components/leftNavMenu'
import {listExperimentStageByUserId} from "@/api/ExperimentStage";
import LeftMenu from "@/components/leftNavMenu";
export default {
  name: "stageInfo",
  components: {LeftMenu},
  comments: {
    LeftNavMenu
  },
  data() {
    return {
      userId: '',
      tableData: [],
    }
  },
  mounted() {
    // this.getEarnings()
  },
  methods: {

    objectSpanMethod({ rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (rowIndex % 3 === 0) {
          return {
            rowspan: 3,
            colspan: 1
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0
          };
        }
      }
    },

    getStage(){
      listExperimentStageByUserId(this.userId).then( response => {
        // console.log(response.data.data.ExperimentStage)
        this.tableData = response.data.data.ExperimentStage
      })
    }
  }
}
</script>

<style scoped>

.container{
  margin-left: 0;
}

.el-col{
  text-align: center;
  padding-top: 20px;
  color: #0099FC;
}

.el-button{
  margin-left: 40px;
}

</style>
